<template>
  <div class="mask" v-show="isShow">
      <img 
       class="loading"
       src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F9c29e9467ed33f2c873779bc932b3964d793fa41235e5-435YZj_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637746495&t=5741654bfff425c2d88708b5360a6445" alt="">
  </div>
</template>

<script>
  export default {
    data(){
      return{
        isShow:false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.6);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    .loading{
      filter:opacity(20%)
    }
  }
</style>